<script setup>
import { ref } from 'vue'
import {
  tagListService,
  tagDelTagService,
  tagAddTagService,
  tagUpdateTagService
} from '@/api/admin/tag'
// 数据
const tags = ref([])
const getList = async () => {
  const res = await tagListService()
  tags.value = { ...res.data }
}
getList()
// 操作
const isEdit = ref(false)
const formRef = ref()
const formModel = ref({
  tagName: '',
  color: ''
})
const rules = {
  tagName: [
    { required: true, message: '请输入标签名称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
  ],
  color: [
    { required: true, message: '请输入标签颜色', trigger: 'blur' },
    {
      pattern: /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/,
      message: '长度在 2 到 10 个字符',
      trigger: 'blur'
    }
  ]
}

// 添加标签
const addHandler = () => {
  isEdit.value = false
  formModel.value = {
    tagName: '',
    color: ''
  }
}

// 编辑
const editHandler = (tag) => {
  isEdit.value = true
  formModel.value = { ...tag }
}

const saveHandler = async () => {
  await formRef.value.validate()
  if (formModel.value.id) {
    await tagUpdateTagService(formModel.value)
  } else {
    // console.log('新增')
    await tagAddTagService(formModel.value)
  }
  ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
  formModel.value = {
    tagName: '',
    color: ''
  }
  getList()
}

// 删除标签
const delTag = async (value) => {
  await ElMessageBox.confirm('确定删除吗', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await tagDelTagService(value)
  ElMessage.success('删除成功')
  getList()
}

defineOptions({
  name: 'TagPage'
})
</script>
<template>
  <el-row>
    <el-col :span="12">
      <el-card style="max-width: 480px">
        <template #header>
          <div
            class="card-header"
            style="display: flex; justify-content: space-between"
          >
            <span>{{ isEdit ? '编辑标签' : '新增标签' }}</span>
            <el-button @click="addHandler" type="primary">新增</el-button>
          </div>
        </template>
        <el-form
          :model="formModel"
          :rules="rules"
          label-position="top"
          ref="formRef"
        >
          <el-form-item label="标签名" prop="tagName">
            <el-input v-model="formModel.tagName"></el-input>
          </el-form-item>
          <el-form-item label="颜色" prop="color">
            <el-input v-model="formModel.color" style="width: 405px"></el-input>
            <el-color-picker v-model="formModel.color" />
          </el-form-item>
          <el-form-item>
            <el-button @click="saveHandler" type="primary">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card style="max-width: 480px">
        <template #header>
          <div class="card-header">
            <span>所有标签</span>
          </div>
        </template>
        <div class="flex gap-2">
          <el-tag
            class="tag"
            v-for="tag in tags"
            :key="tag.id"
            closable
            :color="tag.color"
            @close="delTag(tag.id)"
            @click="editHandler(tag)"
          >
            {{ tag.tagName }}
          </el-tag>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped>
.tag {
  color: #fff;
  margin-right: 10px;
}
</style>
